<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>注册用户列表</span>
      </div>

      <el-table
        :data="list"
        border
        style="width: 100%"
      >
        <el-table-column
          fixed
          label="序号"
          width="50"
          align="center"
        />
        <el-table-column
          prop="username"
          label="用户名"
          width="150"
          align="center"
        />
        <el-table-column label="头像" width="200" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.icon" alt="" style="width:60px;height:60px;border-radious:50%">
          </template>
        </el-table-column>

        <el-table-column
          prop="nickname"
          label="昵称"
          width="150"
          align="center"
        />
        <el-table-column
          prop="realname"
          label="真实姓名"
          width="200"
          align="center"
        />
        <el-table-column label="性别" width="200" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.sex === 0?'男':(scope.row.sex === 1?'女':'') }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          width="200"
          align="center"
        />
        <el-table-column
          prop="email"
          label="邮箱"
          width="200"
          align="center"
        >
          <el-table-column
            prop="birthday"
            label="生日"
            width="150"
            align="center"
          >
            <el-table-column
              prop="createTime"
              label="注册时间"
              width="200"
              align="center"
            />
          </el-table-column></el-table-column></el-table>

      <el-pagination
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>
<script>
import { findMembersByPage } from '@/api/userlist/user.js'
export default {
  data() {
    return {
      list: [],
      page: {
        currentPage: 1,
        pageSizes: [10, 20, 30],
        pageSize: 10,
        total: 0
      }
    }
  },
  computed: {
  },
  created() {
    this.getUserList()
  },
  methods: {
    getUserList() {
      findMembersByPage(this.page.currentPage, this.page.pageSize).then(res => {
        console.log(res)
        this.list = res.data.rows
        this.page.total = res.data.total
      })
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getUserList()
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getUserList()
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
